<template>
  <div class="card-font">
    <el-card style="width: 100%">
      <template #header>
        <div class="card-header">
          <span>{{ project.name }}</span>
        </div>
      </template>
      <div>
        <el-row>
          <el-col :span="12"> 在排队人数：</el-col>
          <el-col :span="12"> {{ project.number }} </el-col>
        </el-row>
        <el-row>
          <el-col :span="12"> 预计排队时间：</el-col>
          <el-col :span="12">
            {{ Math.floor((project.number * project.duration) / 60.0) }}
            min</el-col
          >
        </el-row>
        <slot name="other"></slot>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { IClientProject } from "@/api/queue/types";
import { PropType } from "vue";

const props = defineProps({
  project: {
    type: Object as PropType<IClientProject>,
    required: true,
  },
});
</script>

<style scoped>
.card-font {
  font-size: small;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
